<template>
    <button @click="toXml">toXml</button>
    <div class="example-editor" ref="editorRef"></div>
</template>

<script lang="ts" setup>
import { mxCell, type mxGraph } from "mxgraph";
import { onMounted, ref, Ref } from "vue";
import {
    myMxClient,
    myMxCodec,
    myMxConstants,
    myMxEdgeStyle,
    myMxGraph,
    myMxPoint,
    myMxRubberband,
    myMxUtils,
    myMxHierarchicalLayout,
    myMxCompactTreeLayout
} from "@/components/myMxGraph/myMxGraphLoader";
// from "../myMxGraph/myMxGraphLoader";
const editorRef: Ref<HTMLDivElement | undefined> = ref();
const currentGraph: Ref<mxGraph | undefined> = ref();
let graph =null;
function initGraph() {
    const container = editorRef.value;
    if (!myMxClient.isBrowserSupported()) {
        myMxUtils.error("浏览器不支持", 200, false);
    }
     graph = new myMxGraph(container);
   
    var parent = graph.getDefaultParent();
    // 定义节点样式
    var nodeStyle ={};
    nodeStyle[myMxConstants.STYLE_FILLCOLOR]="#3CAEA3";
    nodeStyle[myMxConstants.STYLE_FONTSIZE]=12;
    nodeStyle[myMxConstants.STYLE_STROKECOLOR]="white";
    nodeStyle[myMxConstants.STYLE_FONTCOLOR]="white";
    nodeStyle[myMxConstants.STYLE_ROUNDED]=1;
    // 将定义好的样式object push 到 stylesheet
    graph.getStylesheet().putCellStyle('nodeStyle',nodeStyle)
    graph.getModel().beginUpdate();
    // const layout = new myMxHierarchicalLayout(graph) // 竖向结构
    const layout = new myMxCompactTreeLayout(graph) //横向树形结构
  try {
        var v1 = graph.insertVertex(
          parent,
          null,
          "Hello,",
          20,
          200,
          100,
          50,
          'nodeStyle'
        );
        var v2 = graph.insertVertex(
          parent,
          null,
          "World",
          150,
          200,
          100,
          50,
          'nodeStyle'
        );

        var v3 = graph.insertVertex(
          parent,
          null,
          "I",
          300,
          200,
          100,
          50,
          'nodeStyle'
        );

        var v4 = graph.insertVertex(
          parent,
          null,
          "Love",
          450,
          200,
          100,
          50,
          'nodeStyle'
        );

        var v5 = graph.insertVertex(
          parent,
          null,
          "You",
          600,
          200,
          100,
          50,
          'nodeStyle'
        );

        var v6 = graph.insertVertex(
          parent,
          null,
          "My girl",
          750,
          200,
          100,
          50,
          'nodeStyle'
        );
        graph.insertEdge(parent, null, "", v1, v2);
        graph.insertEdge(parent, null, "", v1, v3);
        graph.insertEdge(parent, null, "", v2, v4);
        graph.insertEdge(parent, null, "", v4, v5);
        graph.insertEdge(parent, null, "", v5, v6);
        layout.execute(parent)
        
      } finally {
        // Updates the display
        graph.getModel().endUpdate();
      }
}
function toXml(){
    const encodeers = new myMxCodec();
    const node = encodeers.encode(graph.getModel())
    console.log(myMxUtils.getPrettyXml(node));
    

}
onMounted(() => {
    console.log("app is onMounted");
    initGraph();
});



</script>

<style>
.example-editor {
    background: url("@/assets/editor/images/grid.gif");
    height: 100vh;
    width: 100%;
}
</style>
